import React from "react";
import { Card, Button, Divider, Tag } from "antd";
import { UserOutlined } from "@ant-design/icons";
import { ITemplate } from "store/reducers/home";
import "./index.scss";

interface ITemplateItemProps {
    temp: ITemplate
}

const TemplateItem: React.FC<ITemplateItemProps> = (props) => {
    const { temp } = props;
    return (<Card
        className="template-wrapper"
        hoverable
        style={{ width: 280 }}
        cover={<div className="template-cover">
            <img alt="example" src={temp.cover} />
            <div className="cover-btn">
                <Button type="primary">使用该模版</Button>
            </div>
        </div>}
      >
        <div className="template-detail">
            <h3>{temp.name}</h3>
            <Divider />
            <div className="template-user">
                <span className="author">作者: <i>{temp.author}</i></span>
                <span className="used"><UserOutlined /> <i>{temp.used}</i></span>
            </div>
        </div>
        {
            (temp.new || temp.hot) && (<div className="template-tag">
                {temp.hot && (<Tag color="red">HOT</Tag>)}
                {temp.new && (<Tag color="green">NEW</Tag>)}
            </div>)
        }
      </Card>)
}

export default TemplateItem;